<template>
  <div class="home">
    <div class="car-box">
    <el-carousel class="carousel" direction="vertical" :autoplay="true">
      <el-carousel-item v-for="(news,index) of newsList" :key="index">
        <img  class="img" :src="news.news_picture" alt="" @click="getDetail(news.news_id)">
        <div class="title">{{ news.news_title }}</div>
      </el-carousel-item>
    </el-carousel>
    </div>
  </div>
  <div class="hotlist">
  <div><img src="../assets/hotlist.png" class="hotimg" alt=""></div>
  <div v-for="(news,index) of allList" :key="index" class="rank" :class="{visited1:isvisited1===news.news_id}"
  @mouseover="isvisited1=news.news_id" @mouseout="isvisited1=null" @click="getDetail(news.news_id)">
  <i class="num">{{ index+1 }}</i>{{news.news_title}}</div>
</div>
  <div class="card">
      <div v-for="news in allList" :key="news" :class="{visited:isvisited===news.news_id}" class="card-box"
      @mouseover="isvisited=news.news_id" @mouseout="isvisited=null" @click="getDetail(news.news_id)">
        <h4 class="card_title">{{ news.news_title }}</h4>
        <span class="card_content">{{ news.news_content }}</span>
      </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'IndexView',
  setup () {
    const isvisited = ref(null)
    const isvisited1 = ref(null)
    const newsList:any = ref(null)
    const allList:any = ref(null)
    const router = useRouter()
    const newsTag:any = sessionStorage.getItem('newsTag')
    const getDetail = (item:any) => {
      router.push({ path: 'newDetail', query: { news_id: item } })
    }
    const getIndex = () => {
      axios.post('http://localhost:8081/index', { news_tag: newsTag }).then(res => {
        if (res != null) {
          newsList.value = res.data
        } else { ElMessage.success('获取资源失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    const getAllNews = () => {
      axios.post('http://localhost:8081/all', { news_tag: newsTag }).then(res => {
        if (res != null) {
          allList.value = res.data
        } else { ElMessage.success('获取资源失败') }
      }).catch(error => {
        console.log(error)
      })
    }
    getIndex()
    getAllNews()
    return {
      isvisited,
      isvisited1,
      newsList,
      getDetail,
      allList
    }
  }

})
</script>
<style scoped>
.home{
  top: 80px;
  position: relative;
}
.car-box{
  margin-top: 10px;
  margin-left: 80px;
  height: 360px;
  width: 720px;
  box-shadow: 0px 5px 15px #bebfc0;
  float: left;
}
.carousel{
  height: 340px;
  width: 700px;
  padding: 10px;
  cursor: pointer;
}
.img{
  height: 340px;
  width: 700px;
}
.title{
  color: #ffffff;
  left: 10px;
  right: 10px;
  bottom: 10px;
  position: absolute;
  text-align: left;
  padding: 10px;
  font-weight: bolder;
  font-size: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card{
  position: absolute;
  margin-top: 480px;
  margin-left: 60px;
  width: 740px;
  float: left;
  cursor: pointer;
  position: absolute;
}
.card-box{
  box-shadow: 0px 5px 5px #bebfc0;
  margin-bottom: 13px;
  width: 340px;
  height: 70px;
  text-align: left;
  padding: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
  margin-left: 20px;
}
.card_title{
  margin: 5px;
  left: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card_content{
  margin-left: 5px;
}
.visited{
  box-shadow: 0px 5px 5px #bebfc0;
  margin-bottom: 13px;
  width: 340px;
  height: 70px;
  text-align: left;
  padding: 5px;
  color: white;
  background-color: #aae3f8;
}
.hotlist{
  position: absolute;
  right: 90px;
  top: 100px;
  width: 20%;
  height: auto;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
  padding: 20px;
}
.hotimg{
  height: 80px;
  width: 200px;
  margin-bottom: 20px;
}
.rank{
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
}
.visited1{
  font-weight: bolder;
}
.num{
  color: rgb(219, 48, 44);
  margin-right: 10px;
  font-size: 20px;
}
</style>
<style>
  .el-carousel__container {
    height: 100% !important;
  }
</style>
